<!-- 钱包-使用卡券 -->
<template>
	<view class="coupons">
		<!-- <uv-empty v-if="!coupons.length" mode="coupon" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty> -->
		<view class="coupon-list-box" :style="!dataList.length ? 'justify-content: center;' : ''">
			<noData style="margin-top: 40rpx;" v-if="!dataList.length"></noData>
			<view v-else>
				<view v-for="coupon in dataList" :key="coupon.id" class="card" :class="'card'+coupon.useState">
					<view class="line">
						<view :class="coupon.useState == 0 ? `money` : `money1`">
							<text>￥</text>
							<text class="value" v-if="coupon.type == 0">{{coupon.couponValue}}</text>
							<text class="value"
								v-if="coupon.type == 1">{{coupon.discountRate == 0.00 ? '免单' : `${coupon.discountRate/10}折`}}</text>
						</view>
						<view class="required" v-if="coupon.reachValue == 0.00">无门槛</view>
						<view class="required" v-if="coupon.reachValue > 0">满{{coupon.reachValue}}可使用</view>
						<view class="required" v-if="coupon.type == 1">最多抵扣: {{coupon.couponValue}}</view>
						<!-- <view class="require">{{coupon.require}}</view> -->
					</view>
					<view class="desc">
						<view class="name" :class="coupon.useState != 0 ? `name2` : ''">{{coupon.couponName}}</view>

						<view class="time" v-if="coupon.availableStartDate && coupon.availableEndDate">
							{{coupon.availableStartDate}}~{{coupon.availableEndDate}}内有效</view>
						<view class="remark">与平台其他优惠不同享</view>
						<!-- <view class="remark">{{coupon.remark}}</view> -->
					</view>
					<view :class="coupon.useState == 0 ? `` : `used`">
						<view v-if="1==coupon.useState || 3==coupon.useState">
							<text>已使用</text>
						</view>
						<view v-else-if="2==coupon.useState">
							<text>已过期</text>
						</view>
						<view v-else>
							<checkbox color="#EC606F" class="checkbox" :checked="coupon.id == couponConsumeId"
								@tap="handlePlaceOrderTo(coupon.id)" />
							<!-- <text>去使用</text> -->
						</view>
					</view>
					<!-- <checkbox color="#EC606F" checked="true" class="checkbox" /> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		postCouponList
	} from '@/api/me.js'
	import cookie from '@/utils/cookie'
	export default {
		name: 'useCoupon',
		components: {

		},
		created() {},
		mounted() {},
		onShow() {
			this.handleXXX()
		},
		onLoad(e) {
			const {
				id,
				cateId,
				couponConsumeId
			} = e
			this.artistId = Number(id)
			this.categoryId = Number(cateId)
			if (!Number(cookie.get("lockCoupon")) && Number(couponConsumeId)) {
				this.couponConsumeId = null
			} else {
				this.couponConsumeId = Number(couponConsumeId)
			}
		},
		data() {
			return {
				dataList: [],
				artistId: null,
				categoryId: null,
				couponConsumeId: null,
				queryState: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
					isQuery: true
				}
			}
		},
		async onReachBottom() {
			if (!this.queryState.isQuery) return false
			this.queryState.pageNum++
			await this.handleInit()
		},
		methods: {
			handleXXX() {
				Object.assign(this.queryState, {
					pageNum: 1
				})
				this.handleInit()
			},
			async handleInit() {
				const {
					pageNum,
					pageSize,
					status
				} = this.queryState
				const params = {
					pageNum,
					pageSize,
					status: status === 999 ? null : status
				}
				try {
					uni.showLoading({
						title: '正在加载中'
					});
					const {
						rows,
						total,
					} = await postCouponList(params)
					if (pageNum === 1) this.dataList = []
					this.dataList = this.dataList.concat(rows)
					Object.assign(this.queryState, {
						isQuery: this.dataList.length < total,
						total
					})
				} catch ({
					message: title = '获取订单列表失败'
				}) {
					Object.assign(this.queryState, {
						isQuery: false
					})
					uni.showToast({
						duration: 5000,
						icon: 'none',
						title
					})

				} finally {
					uni.hideLoading();
				}
			},
			handleTab(url, state) {
				if (0 != state) return
				uni.switchTab({
					url
				})
			},
			handlePlaceOrderTo(consumeId) {
				if (!this.artistId) return
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				if (this.couponConsumeId == consumeId) {
					this.couponConsumeId = undefined
					cookie.remove("lockCoupon")
				} else {
					this.couponConsumeId = consumeId
				}
				cookie.set("lockCoupon", this.couponConsumeId)
				prevPage.$vm.consumeId = this.couponConsumeId;
				uni.navigateBack({
					delta: 1
				})
			},
		},
		handleSearch({
			value
		}) {
			this.queryState.status = value
			this.handleXXX()
		}
	}
</script>

<style lang="scss">
	.coupons {
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) 0%, rgba(202, 191, 192, 0) 100%);
		min-height: 100vh;
		background-size: 60% 100%;
		padding: 28rpx 44rpx 0 32rpx;

		.card {
			margin-bottom: 24rpx;
			padding: 32rpx 40rpx;
			width: calc(100% - 80rpx);
			height: 120rpx;
			border-radius: 20rpx;
			// background: #FFFFFF;
			box-shadow: 0 0 16rpx 6rpx rgba(210, 211, 213, 0.5);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background: linear-gradient(to right, #F33030, #F33030 1%, #FFFFFF 1%, #FFFFFF 99%) repeat;
		}

		//0-未使用 1-已使用 2-过期未使用 3-已锁定
		.card1 {
			// opacity: 0.4;
			background: linear-gradient(to right, rgba(243, 48, 48, 0.4), rgba(243, 48, 48, 0.4) 1%, #FFFFFF 1%, #FFFFFF 99%) repeat;

			&:last-child {
				color: rgba(243, 48, 48, 0.4);
			}
		}

		.card2 {
			// opacity: 0.4;
			background: linear-gradient(to right, #ABABAB, #ABABAB 1%, #FFFFFF 1%, #FFFFFF 99%) repeat;

			text {
				color: #ABABAB;
			}
		}

		.card3 {
			opacity: 0.4;
		}

		.line {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.money {
				color: #F33030;
				margin-bottom: 16rpx;
			}

			.money1 {
				color: rgba(243, 48, 48, 0.4);
				margin-bottom: 16rpx;
			}

			.value {
				font-family: SourceHanSansCN-Medium;
				font-size: 36rpx;
				line-height: 60rpx;
				text-align: center;
				font-weight: 500;
			}

			.required {
				color: #9E9E9E;
				font-family: SourceHanSansCN-Regular;
				font-size: 24rpx;
				line-height: 24rpx;
				text-align: center;
			}
		}

		.desc {
			// flex-grow:1;
			display: flex;
			flex-direction: column;
			// align-items: flex-start;
			justify-content: center;
			box-sizing: border-box;
			padding: 0 12rpx;

			.name {
				color: #0F0F0F;
				font-family: SourceHanSansCN-Medium;
				font-size: 32rpx;
				line-height: 60rpx;
				text-align: center;
			}

			.name2 {
				color: #ABABAB;
			}

			.time {
				margin-top: 6rpx;
				color: #9E9E9E;
				font-family: SourceHanSansCN-Regular;
				font-size: 20rpx;
				line-height: 24rpx;
				text-align: center;
			}

			.remark {
				margin-top: 12rpx;
				color: #9E9E9E;
				font-family: SourceHanSansCN-Regular;
				font-size: 20rpx;
				line-height: 24rpx;
				text-align: center;
			}
		}

		.use {
			border: 2rpx solid;
			border-radius: 30rpx;
			padding: 4rpx 15rpx;
			color: #EC606F;
			border-color: #EC606F;
		}

		.used {
			border: 2rpx solid;
			border-radius: 30rpx;
			padding: 4rpx 15rpx;
			color: #CECECE;
			border-color: #CECECE;
			font-size: 22rpx;
			white-space: nowrap;
		}

		.checkbox {
			transform: scale(0.7);
		}
	}

	::v-deep .uni-checkbox-input {
		border-radius: 50% !important;
		border-color: #EC606F !important;
	}
</style>